import React from 'react';
import {Modal, Platform, StyleSheet, View} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import PropTypes from 'prop-types';
import {getRealSize, Touchable} from '../utils';
import FAIcon from 'react-native-vector-icons/FontAwesome';

class ImageZoomModal extends React.Component {
  static propTypes = {
    visible: PropTypes.bool,
    images: PropTypes.array,
    index: PropTypes.number,
    onClose: PropTypes.func,
  };
  static defaultProps = {
    visible: false,
    images: [],
    index: 0,
    onClose: () => {},
  };

  render() {
    const {visible, images, onClose, index} = this.props;
    return (
      <Modal visible={visible} transparent={true}>
        <View
          style={[
            Styles.head,
            Platform.OS !== 'android' ? {marginTop: getRealSize(18)} : {},
          ]}>
          <Touchable onPress={() => onClose()}>
            <View style={Styles.icon}>
              <FAIcon name="arrow-left" size={18} color="#757575" />
            </View>
          </Touchable>
        </View>
        <ImageViewer imageUrls={images} index={index} />
      </Modal>
    );
  }
}

export default ImageZoomModal;

const Styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  head: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  icon: {
    paddingHorizontal: getRealSize(15),
    paddingVertical: getRealSize(12),
    alignItems: 'center',
    justifyContent: 'center',
  },
});
